<template>
    <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
                <el-form-item label="报修类型" >
                <el-select v-model="ruleForm.repairType" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="报修描述">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="ruleForm.repairDetail">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">确定添加</el-button>
                    <el-button type="primary" @click="deleteFrom('ruleForm')">确定删除</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>

        </div>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                options: [{
                    value: '家电故障',
                    label: '家电故障'
                }, {
                    value: '网络故障',
                    label: '网络故障'
                }, {
                    value: '管道堵塞',
                    label: '管道堵塞'
                }, {
                    value: '其他',
                    label: '其他'
                }],
                repairType:'',
                repairDetail:'',
                ruleForm: {
                    id:'',
                    repairType: '',
                    repairDetail: ''
                },
                rules: {
                    repairType: [
                        { required: true, message: '请选择报修类型', trigger: 'blur' }
                    ],
                    repairDetail: [
                        { required: true, message: '请输入描述', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                console.log(this.ruleForm)
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const _this = this
                        this.$axios.post('http://localhost:8888/repair/add', this.ruleForm, {
                            params:{
                                temp: formName,
                            }
                        }).then(res => {
                            console.log(res)
                            _this.$alert('操作成功', '提示', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    _this.$router.push("/table")
                                    //这个/table路径要在router中的index中配置
                                }
                            });

                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //删除，取消提交
            deleteFrom(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const _this = this
                        this.$axios.post('/blog/delete', this.ruleForm, {
                            params:{
                                repair: formName,
                            }
                        }).then(res => {
                            console.log(res)
                            _this.$alert('操作成功', '提示', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    _this.$router.push("/blogs")
                                }
                            });
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getInfo() {
                if(this.$route.params != null){
                    this.ruleForm = this.$route.params.num;
                    console.log(this.ruleForm.id)
                }
            }
        },
        created() {
            /*两种操作用一个页面解决笨方法1：
            * 判断有参数传过来的那个是不是undefined
            * 是就代表add
            * 否就代表edit*/
            if(this.$route.params.num!=undefined){
                this.getInfo();
            }

        }
    }
</script>

<style scoped>
    .m-content {
        text-align: center;
    }

</style>
